<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../js/topfoot.js"></script>
    <link rel="stylesheet" href="../css/titlebanner.css">
    <link rel="stylesheet" href="../css/productdetail.css">
</head>
<script>
    $(function () {
        let id = sessionStorage.getItem("productId");
        if (id != null) {
            let data = myAjax("productDetailId", {id: id}, "get");
            getProductDetail(data);
            sessionStorage.setItem("productId", null);
        }
        getCookStyle();
    });

    function getProductDetail(data) {
        $("#detail-imgUrl").html(data[0].imgUrl);
        $("#detail-name").html(data[0].name);
        $("#detail-marketPrice").html(data[0].marketPrice);
        $("#detail-price").html(data[0].price);
        $("#detail-firstLine").html(data[0].mainmaterial);
        $("#detail-content").html(data[0].content);
    }

    function getCookStyle() {
        let data = myAjax("cookStyle", '', "get");
        let html = '';
        for (let i = 0; i < data.length; i++) {
            html += '<div>' + data[i].name + '</div>';
        }
        $("#detail-cook-style").html(html);
    }

</script>
<body>
<div id="tophtml"></div>
<div class="content">
    <div class="title-banner">
        <div>产品展示</div>
        <div id="detail-cook-style">
            <!--            <div>川菜</div>-->
            <!--            <div>粤菜</div>-->
            <!--            <div>湘菜</div>-->
            <!--            <div>鲁菜</div>-->
            <!--            <div>闽菜</div>-->
            <!--            <div>鄂菜</div>-->
        </div>
    </div>
    <div class="product-show">
        <div class="product-detail">
            <div class="floatleft"><img id="detail-imgUrl" src="../img/9_8hh4.jpg" height="300" width="300"/></div>
            <div class="floatleft">
                <h3 id="detail-name"></h3>
                <div>市场价：
                    <aa id="detail-marketPrice">26：00</aa>
                </div>
                <div>价格：<span id="detail-price">22:00</span></div>
            </div>
        </div>
        <div class="product-content">
            <div id="detail-firstLine"></div>
            <div id="detail-content">
                <!--                <p>主料：猪骨大排</p>-->
                <!--                <p>辅料：陈皮</p>-->
                <!--                <p>-->
                <!--                    襄荷3克小葱25克,冰糖15克，辣椒(红、尖、干)5克,花椒2克辣椒油45克料酒30克,盐3克味精2克,襄荷3克小葱25克,冰糖15克，辣椒(红、尖、干)5克,花椒2克辣椒油45克料酒30克,盐3克味精2克-->
                <!--                </p>-->
            </div>
        </div>
    </div>
</div>

<div id="foothtml"></div>
</body>
</html>